<template>
  <a-modal
    class="seckill-form"
    :visible="visible"
    okText="确定"
    cancelText="取消"
    :title="title"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :closable="false"
    :confirmLoading="confirmLoading"
    width="50%"
    @cancel="closeModal()"
    @ok="handleSubmit"
  >
    <a-form-model
      class="group-bargaining-form"
      ref="ruleForm"
      :model="formData"
      :rules="rules"
      :label-col="{ span: 8 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-model-item label="活动名称" prop="activityName">
        <a-input
          :maxLength="20"
          allow-clear
          style="width: 300px"
          v-model="formData.activityName"
          :disabled="disabledFun('activityName')"
          placeholder="请输入活动名称"
        />
      </a-form-model-item>
      <a-form-model-item label="活动开始时间" prop="startDate">
        <a-date-picker
          style="width: 300px"
          allow-clear
          v-model="formData.startDate"
          :disabled="disabledFun('startDate')"
          :disabled-date="disabledStartDate"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择开始时间"
          @openChange="handleStartOpenChange"
        />
      </a-form-model-item>
      <a-form-model-item label="活动结束时间" prop="endDate">
        <a-date-picker
          style="width: 300px"
          allow-clear
          v-model="formData.endDate"
          :disabled="disabledFun('endDate')"
          :disabled-date="disabledEndDate"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
          placeholder="请选择结束时间"
          :open="endOpen"
          @openChange="handleEndOpenChange"
        />
      </a-form-model-item>
      <a-form-model-item label="每人限购" prop="enableLimit">
        <a-radio-group
          :disabled="disabledFun('enableLimit')"
          v-model="formData.enableLimit"
        >
          <a-radio :value="1">开启限购</a-radio>
          <a-radio :value="0">关闭限购</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item
        v-if="formData.enableLimit == 1"
        label="每人每个商品限购"
        prop="limitCount"
      >
        <a-input-number
          :min="1"
          :max="10000"
          allow-clear
          style="width: 100px"
          v-model="formData.limitCount"
          :disabled="disabledFun('limitCount')"
          placeholder="请输入活动标题"
        />
        <p class="form-tips">1件起，限制10000件内，超过无法购买</p>
      </a-form-model-item>
      <!-- <a-form-model-item label="订单取消" prop="cancelOrderTime">
        <span>买家</span>
        <a-input-number
          :min="5"
          :max="360"
          allow-clear
          style="width:100px;margin: 0 5px;"
          v-model="formData.cancelOrderTime"
          :disabled="disabledFun('cancelOrderTime')"
          placeholder="请输入活动标题" />
        <span>分钟未支付将自动取消订单</span>
        <p class="form-tips">限制5分钟—360分钟内</p>
      </a-form-model-item> -->
      <a-form-model-item label="是否使用优惠券" prop="enableCoupon">
        <a-radio-group
          :disabled="disabledFun('enableCoupon')"
          v-model="formData.enableCoupon"
        >
          <a-radio :value="0">否</a-radio>
          <a-radio :value="1">是</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="活动预告" prop="enableNotice">
        <a-radio-group
          :disabled="disabledFun('enableNotice')"
          v-model="formData.enableNotice"
        >
          <a-radio :value="1">开启</a-radio>
          <a-radio :value="0">关闭</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="活动标题" prop="activityTitle">
        <a-input
          :minlength="2"
          :maxLength="5"
          allow-clear
          style="width: 300px"
          v-model="formData.activityTitle"
          :disabled="disabledFun('activityTitle')"
          placeholder="请输入活动标题"
        />
        <p class="form-tips">2-5个字，活动预告和活动进行期间展示于商品详情页</p>
      </a-form-model-item>
      <a-form-model-item label="活动到期展示" prop="enableExpireShow">
        <a-radio-group
          :disabled="disabledFun('enableExpireShow')"
          v-model="formData.enableExpireShow"
        >
          <a-radio :value="1">开启</a-radio>
          <a-radio :value="0">关闭</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="活动规则" prop="remark">
        <div class="rule">
          <a-textarea
            allow-clear
            style="width: 300px"
            :maxLength="300"
            :auto-size="{ minRows: 3, maxRows: 10 }"
            :disabled="disabledFun('remark')"
            v-model="formData.remark"
            placeholder="请输入活动规则"
          />
          <span class="limitWords" v-if="formData.remark"
            >{{ formData.remark.length || 0 }}/300</span
          >
          <span class="limitWords" v-else>0/300</span>
        </div>
      </a-form-model-item>
    </a-form-model>
    <template slot="footer">
      <a-button key="back" @click="closeModal"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="handleSubmit">
        确定
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import moment from "moment";
import deepCopy from "@/utils/deepCopy";
import { cloneDeep } from "lodash";
const formData = {
  enableMspage: 0,
  activityName: "",
  startDate: "",
  endDate: "",
  enableLimit: 0,
  limitCount: 1,
  cancelOrderTime: 5,
  enableCoupon: 0,
  enableNotice: 1,
  activityTitle: "",
  enableExpireShow: 1,
  remark: "",
  activityStatu: 1,
};
export default {
  name: "seckillForm",
  data() {
    return {
      visible: false,
      title: "编辑活动",
      confirmLoading: false,
      handle: "edit",
      formData: {},
      // 验证规则
      rules: {
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
        ],
        startDate: [
          {
            required: true,
            message: "请选择开始时间",
            trigger: ["change", "blur"],
          },
        ],
        endDate: [
          {
            required: true,
            message: "请选择结束时间",
            trigger: ["change", "blur"],
          },
        ],
        // enableLimit: 0,
        // limitCount: 1,
        // cancelOrderTime: 5,
        enableCoupon: [
          { required: true, message: "请选择是否使用优惠券", trigger: "blur" },
        ],
        enableNotice: [
          {
            required: true,
            message: "请选择是否开启活动预告",
            trigger: "blur",
          },
        ],
        // activityTitle: '',
        enableExpireShow: [
          {
            required: true,
            message: "请选择活动到期是否展示",
            trigger: "blur",
          },
        ],
        // remark: ''
      },
      disabled: false,
      // 是否打开endTime
      endOpen: false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    moment,
    // 获取数据
    edit(record) {
      if (this.handle != "add") {
        this.$get(
          "/seckill/activity/query",
          { id: record.id },
          { baseURL: `${location.origin}/goldenhome/seckill/admin` }
        ).then((res) => {
          if (res && res.returnCode == "1000") {
            if (res.dataInfo) {
              this.formData = cloneDeep(res.dataInfo);
            }
          }
        });
        this.handle == "edit"
          ? (this.title = "编辑活动")
          : (this.title = "查看活动");
      } else {
        console.log("formData", formData);
        this.title = "新增活动";
        this.resetData();
      }
    },
    // 表单禁用状态
    disabledFun(key) {
      let res = false;
      let keyArr = [
        "activityName",
        "endDate",
        "enableLimit",
        "limitCount",
        "cancelOrderTime",
        "enableCoupon",
        "enableExpireShow",
        "remark",
      ];
      switch (this.handle) {
        case "add":
          res = false;
          break;
        case "edit":
          res =
            this.formData.enableMspage == 1 && !keyArr.includes(key)
              ? true
              : false;
          break;
        case "view":
          res = true;
          break;
        default:
          res = false;
          break;
      }
      return res;
    },
    //重置
    resetData() {
      this.formData = deepCopy(formData);
    },
    // 开始时间不能小于当前时间
    disabledStartDate(current) {
      return current < moment().subtract(1, "days");
    },
    // 结束时间不能小于开始时间
    disabledEndDate(current) {
      return current < moment(this.formData.startDate);
    },
    // 是否打开结束时间组件
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    // 结束时间组件
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    // 取消
    closeModal() {
      this.visible = false;
      this.$emit("cancel", false);
    },
    // 提交
    handleSubmit() {
      this.confirmLoading = true;

      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let url = "";
          switch (this.handle) {
            case "add":
              url = "/seckill/activity/add";
              break;
            case "edit":
              url = "/seckill/activity/update";
              break;
          }
          this.$post(url, this.formData, {
            baseURL: `${location.origin}/goldenhome/seckill/admin`,
          }).then((res) => {
            if (res && res.returnCode == "1000") {
              this.visible = false;
              this.$message.success("保存成功");
              this.$emit("cancel", true);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.seckill-form {
  .ant-form-item {
    margin-bottom: 12px;
  }
}
.rule {
  position: relative;
  width: 300px;
  .limitWords {
    position: absolute;
    right: 6px;
    bottom: 4px;
    font-size: 10px;
    color: #ccc;
  }
}
</style>
